<template>
    <div class="ui-button">
        <button :class="props.type" :disabled="props.disabled">
            <span v-if="props.icon" class="icon iconfont btn-icon" :class="props.icon"></span>
            <slot>按钮</slot>
        </button>
    </div>
</template>
<script setup>
import { defineProps } from 'vue';

const props = defineProps({
    type: {
        type: String,
        default: ''
    },
    icon: null,
    disabled: {
        type: Boolean,
        default: false
    }
})
</script>
<style scoped>
.ui-button{
    display: inline-block;
    margin: 4px;
}
.ui-button button{
    min-width: 100px;
    padding: 0 15px;
    height: 40px;
    line-height: 40px;
    outline: none;
    border: none;
    border-radius: 4px;
    transition: .3s;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ui-button button:hover{
    opacity: .8;
}
button.info{
    background: rgb(13, 140, 237);
    color: #fff;
}
button.success{
    background: rgb(13, 237, 151);
    color: #fff;
}
button.waring{
    background: rgb(237, 136, 13);
    color: #fff;
}
button.error{
    background: rgb(237, 58, 13);
    color: #fff;
}
.btn-icon{
    margin-right: 6px;
}
.ui-button button[disabled] {
    background-color: var(--yong-ui-block04);
    cursor: no-drop;
}
</style>